<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>应用jQuery的find和animate等方法设计横向导航菜单</title>

<style type="text/css">
#wrap-nav .menu li a.navhover {
	background-image: url(images/menubgtu.gif);
	background-repeat: no-repeat;
	background-position: left -83px;
	color: #911531;
}

#wrap-nav .menu ul.sleft {
	right: 6px; left: auto; _right: 5px
}

</style>

<link rel="stylesheet" type="text/css" href="css/inc.css" />

<script src="js/jquery.js"></script>

</head>

<body>

<div class="box">
  <div id="wrap-nav">
    <div class="container">
      <div class="outerbox">
        <div class="innerbox clearfixmenu">
          <ul class="menu">
            <li class="spritemenu">
                <h3><a class="xiala1" href=""><span>首页</span></a></h3></li>
            <li class="spritemenu">
                <h3><a class="xiala1" href=""><span>PS教程</span></a></h3></li>
            <li class="spritemenu">
                <h3><a class="xiala1" href=""><span>网站设计</span></a></h3></li>
            <li class="spritemenu">
                <h3><a class="xiala1" href=""><span>网页代码</span></a></h3>
                <ul style="display: none" class="children clearfixmenu">
                  <li><h3><a class="spritemenu" href="">
                      <span>JS广告代码</span></a></h3></li>
                  <li class="noborder"><h3><a class="spritemenu" href="">
                      <span>导航菜单</span></a></h3></li>
                  <li><h3><a class="spritemenu" href="">
                      <span>常用代码</span></a></h3></li>
                  <li class="noborder"><h3><a class="spritemenu" href="">
                      <span>典型特效</span></a></h3></li>
                  <li><h3><a class="spritemenu" href="">
                      <span>表单及按钮</span></a></h3></li>
                  <li class="noborder"><h3><a class="spritemenu" href="">
                      <span>jQuery代码</span></a></h3></li>
                  <li class="count noborder"><div>提供各种常见网页效果</div></li>
                </ul>
            </li>
            <li class="spritemenu"><h3><a class="xiala1" href="">
                <span>设计教程</span></a></h3>
              <ul style="display: none" class="children clearfixmenu">
                <li><h3><a class="spritemenu" href="">
                    <span>Photoshop</span></a></h3></li>
                <li class="noborder"><h3><a class="spritemenu" href="">
                    <span>ImageReady</span></a></h3></li>
                <li><h3><a class="spritemenu" href="">
                    <span>Dreamweaver</span></a></h3></li>
                <li class="noborder"><h3><a class="spritemenu" href="">
                    <span>Illustrator</span></a></h3></li>
                <li><h3><a class="spritemenu" href="">
                    <span>FireWorks</span></a></h3></li>
                <li class="noborder"><h3><a class="spritemenu" href="">
                    <span>CorelDRAW</span></a></h3></li>
                <li><h3><a class="spritemenu" href="">
                    <span>Flash</span></a></h3></li>
                <li class="noborder"><h3><a class="spritemenu" href="">
                    <span>Freehand</span></a></h3></li>
                <li><h3><a class="spritemenu" href="">
                    <span>Painter</span></a></h3></li>
                <li class="noborder"><h3><a class="spritemenu" href="">
                    <span>Director</span></a></h3></li>
                <li><h3><a class="spritemenu" href="">
                    <span>AutoCAD</span></a></h3></li>
                <li class="noborder"><h3><a class="spritemenu" href="">
                    <span>Authorware</span></a></h3></li>
                <li><h3><a class="spritemenu" href="">
                    <span>3DMAX</span></a></h3></li>
                <li class="noborder"><h3><a class="spritemenu" href="">
                    <span>Maya</span></a></h3></li>
                <li class="count noborder"><div>提供各种各样的设计教程</div></li>
              </ul>
            </li>
            <li class="spritemenu">
                <h3><a class="xiala1" href=""><span>设计欣赏</span></a></h3></li>
            <li class="spritemenu">
                <h3><a class="xiala1" href=""><span>素材</span></a></h3></li>
            <li class="spritemenu">
                <h3><a class="xiala1" href=""><span>视频教程</span></a></h3></li>
            <li class="spritemenu">
                <h3><a class="xiala1" href=""><span>资料知识</span></a></h3></li>
            <li class="overlay"></li>
           </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $('#wrap-nav .menu > li').hover(function() {
	$(this).find('.children').animate({ opacity:'show', height:'show' },300);
	$(this).find('.xiala1').addClass('navhover');
  }, function() {
	$('.children').stop(true,true).hide();
	$('.xiala1').removeClass('navhover');  }
  ).slice(-3,-1).find('.children').addClass('sleft');
</script>

</body>
</html>
